/**
 * MapVerse 弹窗辅助工具函数
 * @description 提供常用的HTML构建器，项目可选择使用
 */

/**
 * 创建弹窗标题
 * @param {string} text - 标题文本
 * @param {string} className - CSS类名，默认'popup-title'
 * @returns {string} HTML字符串
 */
export const createPopupTitle = (text, className = 'popup-title') => {
    return `<div class="${className}">${text || ''}</div>`;
};

/**
 * 创建弹窗行（标签-内容结构）
 * @param {string} label - 标签文本
 * @param {string} content - 内容文本
 * @param {string} className - 行容器CSS类名，默认'popup-row'
 * @returns {string} HTML字符串
 */
export const createPopupRow = (label, content, className = 'popup-row') => {
    return `
        <div class="${className}">
            <span class="popup-label">${label || ''}</span>
            <span class="popup-content">${content || ''}</span>
        </div>
    `;
};

/**
 * 创建弹窗表格
 * @param {string[]} rows - 行HTML字符串数组
 * @param {string} className - 表格容器CSS类名，默认'popup-table'
 * @returns {string} HTML字符串
 */
export const createPopupTable = (rows, className = 'popup-table') => {
    const rowsContent = Array.isArray(rows) ? rows.join('') : '';
    return `<div class="${className}">${rowsContent}</div>`;
};

/**
 * 创建弹窗段落
 * @param {string} title - 段落标题
 * @param {string} content - 段落内容
 * @param {string} className - 段落容器CSS类名，默认'popup-paragraph'
 * @returns {string} HTML字符串
 */
export const createPopupParagraph = (title, content, className = 'popup-paragraph') => {
    return `
        <div class="${className}">
            <div class="popup-paragraph-title">${title || ''}</div>
            <div class="popup-paragraph-content">${content || ''}</div>
        </div>
    `;
};

/**
 * 创建弹窗列表
 * @param {string[]} items - 列表项数组
 * @param {string} className - 列表容器CSS类名，默认'popup-list'
 * @param {string} itemClassName - 列表项CSS类名，默认'popup-list-item'
 * @returns {string} HTML字符串
 */
export const createPopupList = (items, className = 'popup-list', itemClassName = 'popup-list-item') => {
    if (!Array.isArray(items)) return `<div class="${className}"></div>`;
    
    const itemsContent = items
        .filter(item => item != null)
        .map(item => `<div class="${itemClassName}">${item}</div>`)
        .join('');
    
    return `<div class="${className}">${itemsContent}</div>`;
};

/**
 * 安全的HTML转义函数
 * @param {string} text - 需要转义的文本
 * @returns {string} 转义后的文本
 */
export const escapeHtml = (text) => {
    if (typeof text !== 'string') return '';
    
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    
    return text.replace(/[&<>"']/g, (m) => map[m]);
};

/**
 * 格式化数值显示
 * @param {number|string} value - 数值
 * @param {number} precision - 精度，默认2位小数
 * @param {string} unit - 单位，默认空字符串
 * @returns {string} 格式化后的字符串
 */
export const formatNumber = (value, precision = 2, unit = '') => {
    if (value == null || isNaN(value)) return '--';
    const num = parseFloat(value);
    return `${num.toFixed(precision)}${unit}`;
};

/**
 * 格式化日期显示
 * @param {string|Date} date - 日期
 * @param {string} format - 格式，默认'YYYY-MM-DD HH:mm:ss'
 * @returns {string} 格式化后的日期字符串
 */
export const formatDate = (date, format = 'YYYY-MM-DD HH:mm:ss') => {
    if (!date) return '--';
    
    const d = new Date(date);
    if (isNaN(d.getTime())) return '--';
    
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    const hours = String(d.getHours()).padStart(2, '0');
    const minutes = String(d.getMinutes()).padStart(2, '0');
    const seconds = String(d.getSeconds()).padStart(2, '0');
    
    return format
        .replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day)
        .replace('HH', hours)
        .replace('mm', minutes)
        .replace('ss', seconds);
};
